<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog"
      :custom-class="'panna-dialog_small'"
      :title="sysBusinessDetectionItemPack.packagingTestingItems"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <el-form
        ref="formData"
        :model="formData"
        :rules="formDataRules"
        status-icon
      >
        <el-form-item
          :label="sysBusinessDetectionItemPack.packageName"
          :label-width="formLabelWidth"
          prop="packName"
          :error="errorMsg.packName"
        >
          <el-input v-model="formData.packName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancel">{{ operateType.cancel }}</el-button>
        <el-button
          type="primary"
          :disabled="!submitLoad"
          @click="onSubmit('formData')"
          >{{ operateType.confirm }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  create,
  update,
} from "../../../api/DetectionItemManage/SysBusinessDetectionItemPack.js";
import _ from "lodash";

export default {
  name: "SysBusinessDetectionItemPackEdit",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      submitLoad: true,
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "100px",
      initData: {
        id: 0,
        packName: "",
      },
      formData: {
        id: 0,
        packName: "",
      },
      formDataRules: {
        packName: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      initErrorMsg: {
        packName: "",
      },
      errorMsg: {
        packName: "",
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    sysBusinessDetectionItemPack() {
      return this.$t("SysBusinessDetectionItemPack") || {};
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  methods: {
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    onSubmit: _.throttle(function() {
      if (this.submitLoad) {
        this.submitLoad = false;

        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.errorMsg = this.Helper.deepCopy(this.initErrorMsg);
            if (this.formData.id <= 0) {
              create(this.formData)
                .then((res) => {
                  if (res.code === 200) {
                    this.submitLoad = true;

                    this.closeDialog();
                  } else {
                    this.submitLoad = true;

                    this.showValidateMsgCheck(res);
                  }
                  this.loading = false;
                })
                .catch(() => {
                  this.loading = false;
                  this.submitLoad = true;
                });
            } else {
              update(this.formData)
                .then((res) => {
                  if (res.code === 200) {
                    this.submitLoad = true;

                    this.closeDialog();
                  } else {
                    this.submitLoad = true;

                    this.showValidateMsgCheck(res);
                  }
                  this.loading = false;
                  this.submitLoad = true;
                })
                .catch(() => {
                  this.submitLoad = true;

                  this.loading = false;
                });
            }
          } else {
            this.submitLoad = true;
            return false;
          }
        });
      }
    }, 2000),
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg("packName", this.errorMsg, res.msg);
      }
    },
  },
};
</script>
